<template>
    <div class='_wrapper'>
        <div class="_card">
            <div class="_up">
                <el-form :model="searchForm" inline ref="ruleFormRef">
                    <el-form-item label="姓名" prop="name">
                        <el-input
                          @keydown.enter="getList"
                          clearable
                          v-model="searchForm.name"
                          placeholder="请输入姓名"/>
                    </el-form-item>
                    <el-form-item label="筛选类型" prop="type">
                        <el-select v-model="searchForm.type">
                            <el-option
                              v-for="item in typeList"
                              :label="item.label"
                              :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否排除0出勤" prop="type">
                        <el-select v-model="searchForm.exclude">
                            <el-option
                              v-for="item in exclude0"
                              :label="item.label"
                              :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button type="primary" @click="resetForm(ruleFormRef)" plain>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="_down">
                <div class="title">
                    <span>{{ dateRange.join(' - ') }} 考勤统计</span>
                    <uploadFile v-if="isLogin" @submit="setData"/>
                </div>
            </div>
        </div>
        <div class="_card">
            <el-table
              :data="tableData"
              border
              :cell-style="{ 'text-align': 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
            >
                <el-table-column label="序号" prop="id" width="100" type="index"/>
                <el-table-column label="姓名" prop="name"/>
                <el-table-column label="工作地址" prop="workAddress"/>
                <el-table-column label="部门" prop="department"/>
                <el-table-column label="岗位" prop="position"/>
                <el-table-column label="工号" prop="workNum"/>
                <el-table-column label="出勤" prop="attendanceDays"/>
                <el-table-column label="考勤情况">
                    <el-table-column label="正常" prop="normal"/>
                    <el-table-column label="休息" prop="rest"/>
                    <el-table-column label="迟到" prop="late"/>
                    <el-table-column label="事假" prop="personalLeave"/>
                </el-table-column>
                <el-table-column label="缺卡类">
                    <el-table-column label="上班缺卡" prop="missing.clockIn"/>
                    <el-table-column label="下班缺卡" prop="missing.clockOut"/>
                    <el-table-column label="上下缺卡" prop="missing.both"/>
                </el-table-column>
                <el-table-column label="外勤类">
                    <el-table-column label="上班外勤" prop="fieldWorkDetail.morning"/>
                    <el-table-column label="下班外勤" prop="fieldWorkDetail.morning"/>
                    <el-table-column label="外勤" prop="fieldWorkDetail.morning"/>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <employeeDetail :row="row" :dateRange="dateRange">
                            <el-button link type="primary">查看</el-button>
                        </employeeDetail>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import uploadFile from './components/uploadFile.vue'
import employeeDetail from './components/employee-detail.vue'
import type { FormInstance } from 'element-plus'
const isLogin:Ref<boolean> = inject('$isLogin') as Ref<boolean>

// 人员信息
interface Person {
    // 姓名
    name:string,
    // id
    id:string,
    // 部门
    department:string,
    // 考勤日期
    workDates:Array<string | null> | [],
    // 考勤天数
	workNum:number,
    // 异常天数
	warningNum:number,
}
const careInfo:Ref<{
    workDateList?:Array<Person>,
    timeRange?:Array<string>
}> = ref(JSON.parse(localStorage.getItem('#workInfo')||'{}'))
// 展示信息
const allTableData:Ref<Array<Person>> = ref(careInfo.value.workDateList || [])
const tableData:Ref<Array<Person>> = ref(careInfo.value.workDateList || [])
const dateRange:Ref<Array<string>> = ref(careInfo.value.timeRange || [])
// 数据回填
const setData = (val:Array<Person>,timeRange:Array<string>)=>{
    // localStorage.setItem('#workInfo',JSON.stringify({
    //     workDateList:val,
    //     timeRange,
    // }))
    dateRange.value = timeRange
    tableData.value = val
    allTableData.value = val
}
const ruleFormRef = ref<FormInstance>()
// 搜索
const searchForm:Ref<Record<string,any>> = ref({
    name:null,
    type:0,
    exclude:0
})
const getList = ()=>{
    const { name, type, exclude } = searchForm.value
    let result = allTableData.value
    if(!!name) result = result.filter(item=>item.name === name)
    if(type===1) result = result.filter(item=>item.warningNum>0)
    if(exclude===1) result = result.filter(item=>item.workNum!=0)
    tableData.value = result
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    getList()
}
// 筛选类型
const typeList = [
    { value:0, label:'全部' },
    { value:1, label:'仅异常' },
]
const exclude0 = [
    { value:0, label:'否' },
    { value:1, label:'是' },
]
</script>
<style lang="scss" scoped>
.title{
    background: linear-gradient(90deg, #b2d4ff,#f9f8f8);
    padding: 4px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    >span{
        margin-right: 20px;
    }
}
</style>